import React from 'react'
import { useEffect, useState } from "react"
import { Table } from 'antd';
import { useSelector } from 'react-redux';
import { getUserList } from '../../api/user';
import { Tag } from 'antd';

export default function User() {
  // 当前页
  const [current, setCurrent] = useState(1)
  const userInfo = useSelector(state => state.user.userInfo)
  // console.log(userInfo);
  const [userList, setUserList] = useState([])
  const columns = [
    {
      title: '序号',
      dataIndex: 'nickname',
      key: 'name',
      // value是dataIndex所对应的值，record是整行数据，当前的一个对象
      // render: (value, record, index) => 
      //   // <Tag bordered={false}>Tag 1</Tag>
      // <span style={{
      //   display: "inline-block", width: "25px", height: "25px", borderRadius: "5px", border: "1px solid #ccc", textAlign: "center",

      // }}>{(current-1)*8+index+1}</span>
      render(value, record, index) {
        return <Tag color="green">{(current - 1) * 8 + index + 1}</Tag>
    }
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      key: 'nickname',
      render: (nickname) => <p style={{ display: "flex", flexWrap: "wrap" }}>{nickname}</p>,

    },
    {
      title: '手机号',
      dataIndex: 'tel',
      key: 'tel',

    },
    {
      title: '用户id',
      dataIndex: 'userid',
      key: 'userid',
      render: (userid) =>  <Tag color="#2db7f5">{userid}</Tag>,
  },
    {
      title: '验证码',
      dataIndex: 'telcode',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      //  createTime为时间戳，需要用date函数转为时间
      render: (createTime) => <div>{new Date(parseInt(createTime)).toLocaleString()}</div>,
      // render: (createTime) => <div>{createTime}</div>,
    },
  ];
  // axios获取商品数组
  useEffect(() => {
    getUserList(userInfo.token).then(res => {
      // console.log(res.data);
      setUserList(res.data)
    })
  }, [])
  return (
    <div style={{
      padding: 24,
      minHeight: 360,
      background: '#fff',
      borderRadius: '5px',
      width: '100%',
      overflow: "auto"
    }}>
      <p>用户列表</p>
      <Table size='small' rowKey={'userid'} columns={columns} dataSource={userList} pagination={{pageSize:8 ,onChange(page){
        setCurrent(page)}, responsive: true,current}} />

    </div>
  )
}
